<template>
  <div class="left">
    <div v-for="item in treeData" :key="item.role_id" :class="activeId==item.role_id?'box1 box1Foucs':'box1'" @click="sendData(item)">
      <i class="file"></i>
      <span style="marginLeft:3px">{{ item.name }}</span>
    </div>
    <Add
      @success="getLeftList"
      ref="add"
    ></Add>
    <Edit
      @success="getLeftList"
      ref="edit"
    ></Edit>
  </div>
</template>

<script>
import Add from "./Authority_UserGroups_add";
import Edit from "./Authority_UserGroups_edit";
export default {
  name: 'left',
  components:{
    Add,
    Edit,
  },
  data() {
    return {
      activeId:'',
      treeData: [],
    }
  },
  computed:{

  },
  created(){
  },
  methods: {
    //点击节点给container组件发送节点信息
    sendData(data){
      eventBus.$emit('sendDataRoleUser',data.role_id)
      this.activeId=data.role_id
    },
    //获取树形数据
    getLeftList(){
      this.$get('memberRoles').then((res) => {
        this.treeData=res.data
      })
    },
    add(){
      this.$refs.add.init();
    },
    edit(){
      if (this.activeId==='') {
        this.$message.warning(this.$t('common.message_warn_text'));
      } else {
        this.$refs.edit.init(this.activeId);
      }
    },
    del(){
      if (this.activeId==='') {
        this.$message.warning(this.$t('common.message_warn_text'));
      } else {
        let params = new FormData();
        params.append("role_id", this.activeId);
        this.$postForm("delRole", params).then((res) => {
          if(res.success){
            this.$message.success(res.msg);
            this.getLeftList();
          }
        });
      }
    },
  }
}
</script>

<style scoped lang="less">
.left{
  height:  calc(~"100% - 33px");
  padding-top: 5px;
  overflow: auto;
  ::-webkit-scrollbar{
    display: none;
  }
  /*滚动条的轨道*/
  ::-webkit-scrollbar-track{
    display: none;
  }
}
  .box1{
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    margin: 0px 4px;
    border:1px solid transparent;
    cursor: pointer;
    .file{
      width: 16px;
      height: 16px;
      background-image: url(../../assets/img/leaf.gif);
    }
  }
  .box1Foucs{
    background-color: #6c9ee5 ;
  }
  .box1:hover{
    background-color: #6c9ee5 ;
  }
  
  </style>
